<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIqgbRzPinsk6Cz3j4dflntZF09sqz2QI&sensor=true"
        xmlns="http://www.w3.org/1999/html">
</script>
<div id="search-box">
  <input id="btn-search" type="button" value="search"/>
  <label><input id="search-content" type="text"/></label>
  <div id="search-result">
  </div>
</div>
<div id="map"></div>
<script type="text/javascript">
    /**
     * @param {String} id
     * @param {Object} mapOptions
     * @constructor
     */
    function GoogleMap(id, mapOptions) {
        /**
         * @type {google.maps.Map}
         */
        this.map = new google.maps.Map(document.getElementById(id), mapOptions);

        /**
         * @type {Array}
         */
        this.markers = [];

        /**
         * @type {google.maps.InfoWindow[]}
         */
        this.infoWindows = [];

        /**
         * @returns {google.maps.LatLng}
         */
        this.getCenter = function () {
            return this.map.getCenter();
        };

        /**
         * @param {Number} lat
         * @param {Number} lng
         */
        this.setCenter = function (lat, lng) {
            this.map.setCenter(new google.maps.LatLng(lat, lng));
        };

        /**
         * @param {Number} zoom
         */
        this.setZoom = function (zoom) {
            this.map.setZoom(zoom);
        };

        /**
         * @param {Number} lat
         * @param {Number} lng
         * @param {String} content
         */
        this.setMarker = function (lat, lng, content) {
            var map = this.map;

            var marker = new google.maps.Marker();
            marker.setPosition(new google.maps.LatLng(lat, lng));
            marker.setMap(this.map);
            this.markers.push(marker);

            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(content);
            this.infoWindows.push(infoWindow);
            var infoWindows = this.infoWindows;

            google.maps.event.addListener(marker, 'click', function () {
                for (var i = 0; i < infoWindows.length; i++) {
                    infoWindows[i].close();
                }
                infoWindow.open(map, marker);
            });
        };
    }
</script>
<script type="text/javascript">
    var googleMap = new GoogleMap(
          "map",
          {
              center: new google.maps.LatLng(10.774964, 106.704497),
              zoom: 20,
              scaleControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
    );

    $.ajax({
        dataType: 'json',
        type: 'get',
        url: '/google_map/list_all.json',
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                var name = data[i].name;
                var description = data[i].description;
                var lat = data[i].lat;
                var lng = data[i].lng;
                googleMap.setMarker(lat, lng, '<h1>' + name + '</h1>' + '<p>' + description + '</p>');
            }
        }
    });

    $('#btn-search').click(function () {
        var searchContent = $('#search-content').val();
        var latLng = googleMap.getCenter();
        console.log(latLng);
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': searchContent, 'latLng': latLng}, function (results, status) {
            var location = results[results.length - 1].geometry.location;
            googleMap.setCenter(location.lat(), location.lng());

            var result = '<ul>';
            for (var i = 0; i < results.length; i++) {
                var address = '';
                for (var j = 0; j < results[i].address_components.length; j++) {
                    address += results[i].address_components[j].long_name;
                }
                result += '<li>' + address + '</li>';
            }
            result += '</ul>';

            $('#search-result').html(result);
        });
    });
</script>
<style>
    #map {
        width: 800px;
        height: 600px;
        margin: 10px auto;
    }

    #search-box {
        text-align: center;
        margin: 10px auto;
    }
</style>